<style scoped>
.dr {
  margin-left: 10px;
}
.newlyBuild {
  width: 1260px;
  background-color: white;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 20px;
  z-index: 999;
}
.newlyBuild_top {
  justify-content: space-between;
  font-weight: 700;
  height: 40px;
  width: 100%;
  background-color: #f8f8f8;
}
.newlyBuild_top p {
  float: left;
  line-height: 40px;
  padding-left: 20px;
}
.newlyBuild_top i {
  width: 40px;
  height: 40px;
  float: right;
  line-height: 40px;
  padding-left: 12px;
}
.newlyBuild_top_1 {
  margin: 15px 0;
  height: 60px;
  padding-top: 15px;
  background-color: #f8f8f8;
}
.newlyBuild_top_1 p {
  display: inline-block;
  text-align: right;
  width: 70px;
  margin-right: 10px;
}
.newInfo > div {
  margin-bottom: 10px;
}
.newInfo p {
  display: inline-block;
  text-align: right;
  width: 70px;
  margin-right: 10px;
}
p span {
  color: red;
}
.newInfo .newColor .newColor_2 {
  width: 80px;
}
.newPrice p {
  color: red;
}
.accessoryInput {
  display: inline-block;
  position: relative;
  top: 10px;
}
.standardInput {
  display: inline-block;
  position: relative;
  top: 10px;
}
.waveInput {
  display: inline-block;
  position: relative;
  top: 10px;
}
.all {
  padding: 2px 6px 0 0;
}
.anSize {
  height: 110px;
  margin: 0 20px;
  position: relative;
}
.top3_box {
  display: flex;
}
.top3_box1 {
  display: flex;
}
.top3_box_z {
  font-weight: 700;
}
.top3_box1 i {
  margin: 5px 6px 0 15px;
}
.top3_box1 p {
  text-decoration: none;
  color: #017aff;
}
.top3_box2 {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
}
.top3_box3_b {
  width: 32px;
  height: 32px;
  margin-left: 9px;
  background: white;
  padding: 0 5px;
  border-radius: 3px;
  border: 1px solid #dbdbdb;
  color: #60627f;
  outline: none;
}
.top3_box3_b:focus {
  border: 1px solid #017aff;
}
.top3_box3 {
  display: flex;
  position: absolute;
  right: 4px;
  top: 35px;
}
.gd {
  margin-top: 5px;
}
.gd1 {
  margin-right: 7px;
}
.top3_box4 p {
  display: inline-block;
  width: 74px;
  text-align: right;
  margin-right: 6px;
}
.newlyBuild_top4 {
  height: 40px;
  display: flex;
  font-weight: 700;
  font-size: 15px;
  background: #f8f8f8;
  margin-top: 10px;
}
.newlyBuild_top4 p {
  line-height: 40px;
}
.newlyBuild_top4 :first-child {
  margin-left: 10px;
  width: 75px;
}
.newlyBuild_top4 :nth-child(2) {
  width: 230px;
}
.newlyBuild_top4 :nth-child(3) {
  width: 230px;
}
.newlyBuild_top4 :nth-child(4) {
  width: 230px;
}
.newlyBuild_top4 :nth-child(5) {
  width: 225px;
}
.compositionInput {
  height: 40px;
  padding-top: 8px;
  display: flex;
}
.compositionInput p {
  text-decoration: none;
  line-height: 30px;
  color: #017aff;
  width: 50px;
  margin-left: 10px;
}
.newlyBuild_bottom {
  margin: 10px 0 15px 10px;
  width: 90px;
}
.newlyBuild_bottom p {
  color: #017aff;
}
.newlyBuild_table {
  margin: 5px 20px;
}
.newlyBuild_bottom2 {
  display: flex;
  justify-content: flex-end;
  width: 1220px;
}
.newlyBuild_bottom2 p {
  text-decoration: none;
  color: #017aff;
  font-size: 14px;
  padding-top: 5px;
}
.newlyBuild_bottom3 {
  margin: 0 0 20px 20px;
  width: 97%;
}
.newlyBuild_bottom3 p {
  font-weight: 700;
}
.newlyBuild_bottom3_box {
  display: flex;
}
.imgSrcBox {
  height: 150px;
  width: 150px;
}
.imgSrcBox img {
  height: 150px;
  width: 150px;
}
.n_bottom {
  margin-left: 34px;
}
.n_bottom ul {
  list-style: none;
}
.n_bottom ul li i {
  display: none;
  position: absolute;
  right: 5px;
}
.in {
  height: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  margin-top: 14px;
}
.in:focus {
  outline: none;
  border: 1px solid #017aff;
}
.hand {
  cursor: pointer;
}
.displayImage {
  position: fixed;
  top: 241px;
  left: 520px;
  width: auto;
  height: auto;
  max-height: 70px;
}
.largerImage {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  text-align: center;
}
.largerImage img {
  position: relative;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.newInfo .price,
.newInfo .price .el-input__inner {
  width: 120px;
}
</style>

<style>
.newlyBuild .el-radio {
  line-height: 30px;
}
.newlyBuild .el-upload--picture-card {
  border: none;
  width: 300px;
}
.newlyBuild_top_1 .el-input {
  width: 160px;
}
.newInfo .el-input {
  width: 160px;
}
.top3_box4 .el-input {
  width: 160px;
}
.compositionInput .el-input {
  width: 130px;
}
.compositionInput .el-autocomplete .el-input {
  width: 70px;
  margin: 0 10px 0 20px;
}
.compositionInput .el-input__inner {
  padding: 0 5px;
}
.el-autocomplete-suggestion li {
  padding: 0 5px;
}
.newlyBuild .el-checkbox {
  margin-right: 23px;
}
.newlyBuild .top5_i .el-input__inner {
  width: 80px;
}
.newlyBuild .top5_i2 .el-input__inner {
  width: 116px;
}
.newlyBuild .el-icon-question:before {
  color: #017aff;
  position: relative;
  left: 3px;
  top: 0px;
}
.newlyBuild .el-input__inner {
  height: 30px;
}
.accessoryInput .el-input {
  width: 70px;
  display: inline-block;
  margin-right: 10px;
}
.newlyBuild .safe .el-input__inner {
  padding: 0 5px;
}
.newlyBuild .el-checkbox span {
  line-height: 25px;
}
.miniPad .el-input__inner {
  padding: 5px;
}
.newlyBuild .w80 .el-input,
.newlyBuild .w80 .el-input__inner {
  width: 80px;
}
.aa_wrap {
  display: flex;
}
.aaaaaa {
  position: absolute;
  z-index: 1001;
  /* border: 1px solid #e4e7ed; */
  border-radius: 4px;
  /* background-color: #fff; */
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  box-sizing: border-box;
  margin: 5px 0;
  padding-right: 50px;
}
</style>

<template>
  <!-- 货号建档->新建 -->
  <div class="newlyBuild">
    <div class="newlyBuild_top">
      <p>{{ isCreate ? '新建' : '编辑' }}资料</p>
      <i class="el-icon-close" @click="closeClick"></i>
    </div>

    <div style="overflow: auto; width: 100%; max-height: 90vh">
      <div style="padding: 0 20px">
        <div class="newInfo">
          <div class="newBase" style="margin-top: 10px">
            <p><span>* </span>品牌</p>
            <el-select v-model="brandedName" @change="changeBrandedName">
              <el-option
                v-for="item in brandedNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <p><span>* </span>款号</p>
            <el-input
              v-model="styleNumber"
              :disabled="!isCreate"
              @blur="styleNumberBlur"
            ></el-input>

            <p><span>* </span>供应商</p>
            <!-- <el-autocomplete
              @blur="leave"
              clearable
              v-model="supplier"
              :fetch-suggestions="querySupplier"
            >
            </el-autocomplete> -->

            <el-select v-model="supplier">
              <el-option
                v-for="item in manufacturerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <p><span>* </span>品名</p>
            <!-- 三个框是品名编号，品名名称，部类编号 -->
            <!-- <el-select
              v-model="commodityNameNo"
              @change="changeCommodityNameNo"
            >
              <el-option
                v-for="(item, _index) in productNameList"
                :key="item._index"
                :label="item.value"
                :value="_index"
              >
              </el-option>
            </el-select> -->
            <!-- v-model="commodityNameNo" -->
            <el-autocomplete
              class="inline-input"
              v-model="commodityNameNo"
              placeholder="请输入品名编号"
              :fetch-suggestions="handleSearchProductNameList"
              @select="handleProductNameSelect"
              @blur="onBlurProductNameSelect"
            ></el-autocomplete>

            <el-input
              disabled
              v-model="commodityName"
              style="width: 140px; margin: 0 10px"
              placeholder="品名"
            ></el-input>
            <el-autocomplete
              class="w80"
              clearable
              v-model="commodityTypeNo"
              placeholder="部类"
              :fetch-suggestions="queryCommodityTypeNo"
              @select="commodityTypeNoSelect"
              @blur="commodityTypeNoSelect"
            >
              <template slot-scope="{ item }">
                <div>{{ item.value + ' ' + item.label }}</div>
              </template>
            </el-autocomplete>
          </div>

          <div class="newColor" style="margin-top: -10px">
            <!-- colorName格式：{色号：颜色名称， ...} -->
            <p><span>* </span>颜色1</p>
            <el-row class="accessoryInput">
              <el-col>
                <el-autocomplete
                  v-model="colorNo_1"
                  :fetch-suggestions="queryColor"
                  @select="colorNo1Select"
                  @keyup.enter.native="colorNo1Blur"
                  @blur="onBlurColor"
                >
                </el-autocomplete>
                <!-- <el-select v-model="colorNo_1" @change="changeColor_1">
                  <el-option
                    v-for="(item, _index) in colorList"
                    :key="item._index"
                    :label="item.value"
                    :value="_index"
                    :disabled="item.disabled || false"
                  >
                  </el-option>
                </el-select> -->
              </el-col>
            </el-row>
            <el-input
              v-model="colorName1"
              disabled
              class="newColor_2"
            ></el-input>

            <p>颜色2</p>
            <el-row class="accessoryInput">
              <el-col>
                <!-- <el-autocomplete
                  class="inline-input"
                  v-model="colorNo_2"
                  :fetch-suggestions="queryColor"
                  @select="colorNo2Select"
                  @keyup.enter.native="colorNo2Blur"
                >
                </el-autocomplete> -->

                <el-select v-model="colorNo_2" @change="changeColor_2">
                  <el-option
                    v-for="(item, _index) in colorList"
                    :key="item._index"
                    :label="item.value"
                    :value="_index"
                    :disabled="item.disabled || false"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-input
              v-model="colorName2"
              disabled
              class="newColor_2"
            ></el-input>

            <p>颜色3</p>
            <el-row class="accessoryInput">
              <el-col>
                <!-- <el-autocomplete
                  class="inline-input"
                  v-model="colorNo_3"
                  :fetch-suggestions="queryColor"
                  @select="colorNo3Select"
                  @keyup.enter.native="colorNo3Blur"
                >
                </el-autocomplete> -->
                <el-select v-model="colorNo_3" @change="changeColor_3">
                  <el-option
                    v-for="(item, _index) in colorList"
                    :key="item._index"
                    :label="item.value"
                    :value="_index"
                    :disabled="item.disabled || false"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-input
              v-model="colorName3"
              disabled
              class="newColor_2"
            ></el-input>

            <p>颜色4</p>
            <el-row class="accessoryInput">
              <el-col>
                <!-- <el-autocomplete
                  class="inline-input"
                  v-model="colorNo_4"
                  :fetch-suggestions="queryColor"
                  @select="colorNo4Select"
                  @keyup.enter.native="colorNo4Blur"
                >
                </el-autocomplete> -->
                <el-select v-model="colorNo_4" @change="changeColor_4">
                  <el-option
                    v-for="(item, _index) in colorList"
                    :key="item._index"
                    :label="item.value"
                    :value="_index"
                    :disabled="item.disabled || false"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-input
              v-model="colorName4"
              disabled
              class="newColor_2"
            ></el-input>

            <p>颜色5</p>
            <el-row class="accessoryInput">
              <el-col>
                <!-- <el-autocomplete
                  class="inline-input"
                  v-model="colorNo_5"
                  :fetch-suggestions="queryColor"
                  @select="colorNo5Select"
                  @keyup.enter.native="colorNo5Blur"
                  @change="changeColor_5"
                >
                </el-autocomplete> -->
                <el-select v-model="colorNo_5" @change="changeColor_5">
                  <el-option
                    v-for="(item, _index) in colorList"
                    :key="item._index"
                    :label="item.value"
                    :value="_index"
                    :disabled="item.disabled || false"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-input
              v-model="colorName5"
              disabled
              class="newColor_2"
            ></el-input>
          </div>

          <div class="newPrice">
            <p><span>* </span>正价</p>
            <!--   :disabled="sellingPriceNo > 1 || (!isCreate && jxShowCost)" -->
            <el-input v-model="sellingPriceOne" class="price"></el-input>
            <p>售价2</p>
            <!--  :disabled="sellingPriceNo > 2 || (!isCreate && jxShowCost)" -->
            <el-input v-model="sellingPriceTwo" class="price"></el-input>
            <p>售价3</p>
            <!--  :disabled="sellingPriceNo > 3 || (!isCreate && jxShowCost)" -->
            <el-input v-model="sellingPriceThree" class="price"></el-input>
            <p>售价4</p>
            <!-- :disabled="sellingPriceNo > 4 || (!isCreate && jxShowCost)" -->
            <el-input v-model="sellingPriceFour" class="price"></el-input>
            <p>VIP价</p>
            <!--  :disabled="!isCreate && jxShowCost" -->
            <el-input v-model="vipPrice" class="price"></el-input>
            <p>厂价</p>
            <!--  :disabled="!isCreate && jxShowCost" -->
            <el-input v-model="manufacturerPrice" class="price"></el-input>
          </div>

          <div style="position: relative; top: -10px">
            <p><span>* </span>季度</p>
            <el-row class="waveInput">
              <el-col>
                <!-- <el-autocomplete
                  clearable
                  v-model="quarter"
                  :fetch-suggestions="queryQuarterList"
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete> -->
                <el-select v-model="quarter" @change="changeQuarter">
                  <el-option
                    v-for="(item, _index) in quarterList"
                    :key="item._index"
                    :label="item.value"
                    :value="_index"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-row>

            <p>搭配款</p>
            <el-input v-model="matchStyle"></el-input>
            <p>推广价</p>
            <el-input v-model="generalizePrice"></el-input>
            <p>波段</p>
            <el-row class="standardInput">
              <el-col>
                <el-autocomplete
                  clearable
                  v-model="waveBand"
                  :fetch-suggestions="queryWaveList"
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <p>含有码</p>
            <el-input
              v-model="containNo"
              style="width: 60px; margin-right: 10px"
              class="miniPad"
            ></el-input>
            <el-checkbox
              style="margin: 0; height: 30px; padding-right: 8px"
              v-model="statistics"
              label="统计分析"
              size="mini"
              border
            >
            </el-checkbox>
          </div>

          <div style="position: relative; top: -20px; margin: 0">
            <p>原厂货号</p>
            <el-input v-model="originalManufacturerKindsNumber"></el-input>

            <!-- <el-input v-model="supplier"></el-input> -->
            <p>附件</p>
            <el-row class="accessoryInput">
              <el-col>
                <el-autocomplete
                  clearable
                  v-model="accessoryNameNo"
                  :fetch-suggestions="queryNameList"
                  @select="
                    (item) => {
                      this.accessoryNameNo = item.no
                      this.accessoryName = item.value
                    }
                  "
                  @change="accessoryBlur"
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input
              v-model="accessoryName"
              style="width: 80px"
              disabled
            ></el-input>

            <p>备注</p>
            <el-input v-model="remark" style="width: 160px"></el-input>
            <p>商品等级</p>
            <el-input
              v-model="productLevel"
              style="width: 160px; margin-right: 65px"
            ></el-input>
            <el-button type="primary" plain @click="preservation(true)"
              >保存</el-button
            >
            <el-button
              type="primary"
              style="margin-right: 0"
              @click="preservation(false)"
              >保存并新建</el-button
            >
          </div>
        </div>
      </div>

      <div class="anSize">
        <div class="top3_box">
          <p class="top3_box_z"><span>* </span>尺码种类</p>
          <div class="top3_box1">
            <i key="qwe" style="color: #017aff" class="el-icon-question"></i>
            <p style="color: black">说明：</p>
            <p>F3洗涤图查看</p>
            <div class="dr">
              上传图片
              <input
                ref="file1"
                type="file"
                accept="image/*"
                @change="upLoad"
                id="file"
                class="outputlist_upload"
              />
            </div>
            <div class="dr">
              上传图片文件夹
              <!-- <input class="outputlist_upload" type="file" id="fileUploadInput" @change="upLoad1"> -->
              <input
                ref="file"
                class="outputlist_upload"
                type="file"
                webkitdirectory
                @change.stop="changesData"
              />
            </div>
          </div>
        </div>
        <div class="top3_box2">
          <el-checkbox class="gd" style="margin-right: 15px" v-model="checkSize"
            >尺码(默认勾选)</el-checkbox
          >
          <el-checkbox-group
            v-model="sizeData"
            v-for="i in sizeDataList"
            :key="i.no"
          >
            <el-checkbox :label="i.size" class="gd"></el-checkbox>
          </el-checkbox-group>

          <div class="top3_box3">
            <p class="gd gd1">洗涤图</p>
            <!-- <button class="top3_box3_b">02</button> -->
            <input type="text" class="top3_box3_b" v-model="WashingFigure_1" />
            <input type="text" class="top3_box3_b" v-model="WashingFigure_2" />
            <input type="text" class="top3_box3_b" v-model="WashingFigure_3" />
            <input type="text" class="top3_box3_b" v-model="WashingFigure_4" />
            <input type="text" class="top3_box3_b" v-model="WashingFigure_5" />
            <input
              type="text"
              class="top3_box3_b"
              v-model="WashingFigure_6"
              style="margin-right: 25px"
            />

            <el-radio v-model="upDown" label="0">上装</el-radio>
            <el-radio v-model="upDown" label="1">下装</el-radio>

            <p style="margin-right: 10px">男女装</p>
            <el-select v-model="gender" style="width: 80px">
              <el-option
                v-for="item in genderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="top3_box4">
            <p>EAN13码</p>
            <el-input v-model="ean13No"></el-input>
            <!-- <input v-model="input7_1" type="text" class="in in1_8" /> -->
            <p>执行标准</p>
            <el-row class="waveInput">
              <el-col>
                <el-autocomplete
                  clearable
                  v-model="standard"
                  :fetch-suggestions="queryStandardList"
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <p>安全类别</p>
            <el-select v-model="safetyType" class="safe">
              <el-option
                v-for="item in safetyTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <p>洗涤类型</p>
            <el-select v-model="washingType">
              <el-option
                v-for="item in washingTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <p>金属纤维</p>
            <el-select v-model="isIncludeMetalFibre">
              <el-option
                v-for="item in isIncludeMetalFibreList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>

      <!-- 成份表 -->
      <div style="padding: 0 20px">
        <div class="newlyBuild_top4">
          <p>操作</p>
          <p>成份1</p>
          <p>成份2</p>
          <p>成份3</p>
          <p>成份4</p>
          <p>成份5</p>
        </div>
        <div class="compositionInput">
          <p class="hand"></p>
          <!-- top5_i i2 22px 10 15 10 15 10 15 10 15 10-->
          <el-row>
            <el-col>
              <el-autocomplete
                class="inline-input"
                v-model="compositionNo_1"
                :fetch-suggestions="querySearch"
                @select="
                  (item) => {
                    this.composition_1 = item.value
                    this.compositionNo_1 = item.no
                  }
                "
                @keyup.enter.native="inputEnter"
              >
              </el-autocomplete>
            </el-col>
          </el-row>
          <el-input v-model="composition_1"></el-input>

          <el-row>
            <el-col>
              <el-autocomplete
                class="inline-input"
                v-model="compositionNo_2"
                :fetch-suggestions="querySearch"
                @select="
                  (item) => {
                    this.composition_2 = item.value
                    this.compositionNo_2 = item.no
                  }
                "
                @keyup.enter.native="inputEnter"
              >
              </el-autocomplete>
            </el-col>
          </el-row>
          <el-input v-model="composition_2"></el-input>

          <el-row>
            <el-col>
              <el-autocomplete
                class="inline-input"
                v-model="compositionNo_3"
                :fetch-suggestions="querySearch"
                @select="
                  (item) => {
                    this.composition_3 = item.value
                    this.compositionNo_3 = item.no
                  }
                "
                @keyup.enter.native="inputEnter"
              >
              </el-autocomplete>
            </el-col>
          </el-row>
          <el-input v-model="composition_3"></el-input>

          <el-row>
            <el-col>
              <el-autocomplete
                class="inline-input"
                v-model="compositionNo_4"
                :fetch-suggestions="querySearch"
                @select="
                  (item) => {
                    this.composition_4 = item.value
                    this.compositionNo_4 = item.no
                  }
                "
                @keyup.enter.native="inputEnter"
              >
              </el-autocomplete>
            </el-col>
          </el-row>
          <el-input v-model="composition_4"></el-input>

          <el-row>
            <el-col>
              <el-autocomplete
                class="inline-input"
                v-model="compositionNo_5"
                :fetch-suggestions="querySearch"
                @select="
                  (item) => {
                    this.composition_5 = item.value
                    this.compositionNo_5 = item.no
                  }
                "
                @keyup.enter.native="inputEnter"
              >
              </el-autocomplete>
            </el-col>
          </el-row>
          <el-input v-model="composition_5"></el-input>
        </div>
        <div class="newlyBuild_bottom" v-show="!c1">
          <p
            @click="
              () => {
                this.c1 = true
              }
            "
            class="hand"
          >
            + 添加成份
          </p>
        </div>

        <div v-show="c1">
          <div class="newlyBuild_top4">
            <p>操作</p>
            <p>成份6</p>
            <p>成份7</p>
            <p>成份8</p>
            <p>成份9</p>
            <p>成份10</p>
          </div>
          <div class="compositionInput">
            <p class="hand" @click="clearC1">删除</p>
            <!-- top5_i i2 22px 10 15 10 15 10 15 10 15 10-->
            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_6"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_6 = item.value
                      this.compositionNo_6 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_6"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_7"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_7 = item.value
                      this.compositionNo_7 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_7"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_8"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_8 = item.value
                      this.compositionNo_8 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_8"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_9"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_9 = item.value
                      this.compositionNo_9 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_9"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_10"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_10 = item.value
                      this.compositionNo_10 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_10"></el-input>
          </div>
          <div class="newlyBuild_bottom" v-show="!c2">
            <p
              class="hand"
              @click="
                () => {
                  this.c2 = true
                }
              "
            >
              + 添加成份
            </p>
          </div>
        </div>

        <div v-show="c2">
          <div class="newlyBuild_top4">
            <p>操作</p>
            <p>成份11</p>
            <p>成份12</p>
            <p>成份13</p>
            <p>成份14</p>
            <p>成份15</p>
          </div>
          <div class="compositionInput">
            <p class="hand" @click="clearC2">删除</p>
            <!-- top5_i i2 22px 10 15 10 15 10 15 10 15 10-->
            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_11"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_11 = item.value
                      this.compositionNo_11 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_11"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_12"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_12 = item.value
                      this.compositionNo_12 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_12"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_13"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_13 = item.value
                      this.compositionNo_13 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_13"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_14"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_14 = item.value
                      this.compositionNo_14 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_14"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_15"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_15 = item.value
                      this.compositionNo_15 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_15"></el-input>
          </div>
          <div class="newlyBuild_bottom" v-show="!c3">
            <p
              class="hand"
              @click="
                () => {
                  this.c3 = true
                }
              "
            >
              + 添加成份
            </p>
          </div>
        </div>

        <div v-show="c3">
          <div class="newlyBuild_top4">
            <p>操作</p>
            <p>成份16</p>
            <p>成份17</p>
            <p>成份18</p>
            <p>成份19</p>
            <p>成份20</p>
          </div>
          <div class="compositionInput">
            <p class="hand" @click="clearC3">删除</p>
            <!-- top5_i i2 22px 10 15 10 15 10 15 10 15 10-->
            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_16"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_16 = item.value
                      this.compositionNo_16 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_16"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_17"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_17 = item.value
                      this.compositionNo_17 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_17"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_18"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_18 = item.value
                      this.compositionNo_18 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_18"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_19"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_19 = item.value
                      this.compositionNo_19 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_19"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_20"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_20 = item.value
                      this.compositionNo_20 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_20"></el-input>
          </div>
          <div class="newlyBuild_bottom" v-show="!c4">
            <p
              class="hand"
              @click="
                () => {
                  this.c4 = true
                }
              "
            >
              + 添加成份
            </p>
          </div>
        </div>

        <div v-show="c4" style="margin-bottom: 10px">
          <div class="newlyBuild_top4">
            <p>操作</p>
            <p>成份21</p>
            <p>成份22</p>
            <p>成份23</p>
            <p>成份24</p>
            <p>成份25</p>
          </div>
          <div class="compositionInput">
            <p class="hand" @click="clearC4">删除</p>
            <!-- top5_i i2 22px 10 15 10 15 10 15 10 15 10-->
            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_21"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_21 = item.value
                      this.compositionNo_21 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_21"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_22"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_22 = item.value
                      this.compositionNo_22 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_22"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_23"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_23 = item.value
                      this.compositionNo_23 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_23"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_24"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_24 = item.value
                      this.compositionNo_24 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_24"></el-input>

            <el-row>
              <el-col>
                <el-autocomplete
                  class="inline-input"
                  v-model="compositionNo_25"
                  :fetch-suggestions="querySearch"
                  @select="
                    (item) => {
                      this.composition_25 = item.value
                      this.compositionNo_25 = item.no
                    }
                  "
                  @keyup.enter.native="inputEnter"
                >
                </el-autocomplete>
              </el-col>
            </el-row>
            <el-input v-model="composition_25"></el-input>
          </div>
        </div>
      </div>

      <div class="newlyBuild_table">
        <el-table
          id="outTable"
          ref="ingredientTable"
          :data="ingredient"
          tooltip-effect="dark"
          style="width: 100%"
          height="256px"
          highlight-current-row
          @row-click="inClick"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '36px' }"
          @row-dblclick="dblclick"
        >
          <el-table-column prop="typeNumber" label="款号" width="140">
          </el-table-column>
          <el-table-column prop="standard" label="执行标准" width="140">
          </el-table-column>
          <el-table-column prop="safetyType" label="安全类别" width="160">
          </el-table-column>
          <el-table-column prop="ean13No" label="EAN13码" width="160">
          </el-table-column>
          <el-table-column
            prop="sellingPrice"
            label="价格"
            width="100"
            v-if="showPrice"
          >
          </el-table-column>
          <el-table-column
            prop="operator"
            label="操作员"
            width="120"
            v-if="showOperator"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="timeShort" label="时间" width="120">
          </el-table-column>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>

      <div class="newlyBuild_bottom2">
        <el-checkbox class="gd" v-model="showOperator"
          >显示改价操作员</el-checkbox
        >
        <el-checkbox class="gd" v-model="showPrice">显示价格</el-checkbox>
        <p class="hand" @click="exportExcel">导出 EXCEL</p>
        <!-- <p @click="delin" class="hand" style="color:red;margin-left:10px">删除</p> -->
      </div>
    </div>

    <!-- F3洗涤图查看 -->
    <icon-doc
      :style="{ display: showIconDoc }"
      @closeIconDoc="closeIconDoc"
    ></icon-doc>

    <img
      class="displayImage"
      :src="imgSrc"
      v-show="imgSrc"
      @click="
        () => {
          this.largerI = true
        }
      "
    />
    <div
      class="largerImage"
      v-show="largerI"
      @click="
        () => {
          this.largerI = false
        }
      "
    >
      <img :src="imgSrc" />
    </div>
  </div>
</template>

<script>
import {
  getArtNo,
  postWashPrint,
  getAggregate,
  getKindsNumberIngredient,
  postKindsNumber,
  postKindsNumberIngredient,
  putKindsNumberIngredient,
  standardList,
  modifyKindsNumbers,
  delateIngredient
} from '../../../../network/artNo'
import { getBranded } from '../../../../network/branded'
import { getManufacturer, getBarCode } from '../../../../network/manufacturer'
import { getProductName } from '../../../../network/productName'
import { getComposition } from '../../../../network/composition'
import { getSize } from '../../../../network/size'
import { getColorSeason } from '../../../../network/colorSeason'
import { postQuarter } from '../../../../network/quarter'
import {
  deleteImage,
  kindsNumberDoUpload,
  upPicture
} from '../../../../network/images'
// import jsZip from 'jszip'

import XLSX from 'xlsx'
import FileSaver from 'file-saver'

import iconDoc from './iconDoc'

import cookieFn from '../../../../components/mixins/cookieFn'

import { turnToString } from '@/util/util'
import { deepClone } from '../../../../util/util'

export default {
  mixins: [cookieFn],
  // jsZip,
  props: {
    detailInfo: {
      type: Object,
      default: {}
    },
    isCreate: {
      type: Boolean,
      default: true
    },
    show: {
      type: String,
      default: 'none'
    },
    waveBandList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      ingredientId: '',
      pnId: '',
      pniId: '',
      ingredient: [],
      colorList: [],
      kindsNumber: '',
      styleNumberLength: 0,
      mnemonicCode: '',
      commodityTypeNo: '',
      styleNumber: '',
      brandedName: '',
      brandedNameList: [],
      company: '',
      originalManufacturerKindsNumber: '',
      // 品名列表
      productNameList: [],
      productNameListAll: [],
      // 部类列表
      commodityTypeList: [],
      commodityNameNo: '',
      commodityName: '',

      colorNo_1: '',
      colorName1: '',
      colorNo_2: '',
      colorName2: '',
      colorNo_3: '',
      colorName3: '',
      colorNo_4: '',
      colorName4: '',
      colorNo_5: '',
      colorName5: '',
      colorStrList: [],
      sellingPriceOne: '',
      sellingPriceTwo: '',
      sellingPriceThree: '',
      sellingPriceFour: '',
      sellingPriceNo: 0,
      jxShowCost: this.getCookie('jxShowCost') == '0',
      vipPrice: '',
      manufacturerPrice: '',
      quarter: '',
      quarterList: [],
      matchStyle: '',
      generalizePrice: '',
      waveBand: '',
      containNo: '',
      statistics: true,
      manufacturerList: [],
      testManufacturerList: [],
      supplier: '',
      accessoryNameNo: '',
      accessoryNameList: [],
      accessoryName: '',
      remark: '',
      productLevel: '',

      checkSize: true,
      WashingFigure_1: '02',
      WashingFigure_2: '52',
      WashingFigure_3: '12',
      WashingFigure_4: '30',
      WashingFigure_5: '35',
      WashingFigure_6: '32',
      sizeKindId: '',
      sizeData: [],
      sizeDataList: [],
      ean13No: '',
      standard: '',
      standardList: [],
      // 1、A类为婴幼儿服装，其甲醛含量不得大于20毫克每公斤。

      // 2、B类为直接接触皮肤类服装，其甲醛含量不得大于75毫克每公斤。

      // 3、C类为非直接接触皮肤类服装，其甲醛含量不得大于300毫克每公斤。
      safetyType: '',
      safetyTypeList: [
        {
          value: 'GB18401-2010B类',
          label: 'GB18401-2010B类'
        },
        {
          value: 'GB18401-2010C类',
          label: 'GB18401-2010C类'
        }
      ],
      washingType: '一般',
      washingTypeList: [
        {
          label: '一般',
          value: '一般'
        },
        {
          label: '干洗',
          value: '干洗'
        },
        {
          label: '真丝',
          value: '真丝'
        },
        {
          label: '皮草',
          value: '皮草'
        },
        {
          label: '其他',
          value: '其他'
        }
      ],
      isIncludeMetalFibre: 0,
      isIncludeMetalFibreList: [
        {
          value: 0,
          label: '否'
        },
        {
          value: 1,
          label: '是'
        }
      ],
      showOperator: true,
      showPrice: false,
      c1: false,
      c2: false,
      c3: false,
      c4: false,
      compositionList: [],
      composition_1: '',
      compositionNo_1: '',
      composition_2: '',
      compositionNo_2: '',
      composition_3: '',
      compositionNo_3: '',
      composition_4: '',
      compositionNo_4: '',
      composition_5: '',
      compositionNo_5: '',
      composition_6: '',
      compositionNo_6: '',
      composition_7: '',
      compositionNo_7: '',
      composition_8: '',
      compositionNo_8: '',
      composition_9: '',
      compositionNo_9: '',
      composition_10: '',
      compositionNo_10: '',
      composition_11: '',
      compositionNo_11: '',
      composition_12: '',
      compositionNo_12: '',
      composition_13: '',
      compositionNo_13: '',
      composition_14: '',
      compositionNo_14: '',
      composition_15: '',
      compositionNo_15: '',
      composition_16: '',
      compositionNo_16: '',
      composition_17: '',
      compositionNo_17: '',
      composition_18: '',
      compositionNo_18: '',
      composition_19: '',
      compositionNo_19: '',
      composition_20: '',
      compositionNo_20: '',
      composition_21: '',
      compositionNo_21: '',
      composition_22: '',
      compositionNo_22: '',
      composition_23: '',
      compositionNo_23: '',
      composition_24: '',
      compositionNo_24: '',
      composition_25: '',
      compositionNo_25: '',
      showIconDoc: 'none',

      imgSrc: '',
      upDown: '0',
      gender: 1,
      genderList: [
        { value: 1, label: '女' },
        { value: 0, label: '男' }
      ],
      largerI: false,

      fileList: [],

      sizeDataOriginal: [],
      colorListOriginal: [],
      timeout: null
    }
  },
  components: {
    iconDoc
  },
  created() {
    this.sizeData = []
    //获取附件,品牌,颜色，部类，季度下拉集合
    getAggregate().then((res) => {
      //附件集合
      let accessoryDataList = res.data.data.accessoryData
      accessoryDataList.forEach((e) => {
        this.accessoryNameList.push({ no: e.no, value: e.name })
      })

      // 品牌集合
      let brandedDataList = res.data.data.brandedData.data
      brandedDataList.forEach((e) => {
        this.brandedNameList.push({ value: e.name, label: e.name })
      })

      // 获取部类
      res.data.data.commodityTypeData.forEach((e) => {
        this.commodityTypeList.push({ label: e.type, value: e.no, id: e.id })
      })
      // console.log(this.commodityTypeList);

      //季度集合
      let quarterDataList = res.data.data.quarterData
      quarterDataList.forEach((e) => {
        this.quarterList.push({ value: e.name, label: e.id })
      })
    })

    // 获取品名集合
    getProductName().then((res) => {
      res.data.data.forEach((e) => {
        this.productNameList.push({
          value: e.name,
          no: e.no,
          type: e.commodityTypeNo
        })
        this.productNameListAll.push({
          value: e.name,
          no: e.no,
          type: e.commodityTypeNo
        })
      })
    })

    // 获取成份集合
    getComposition().then((res) => {
      // console.log(res)
      res.data.data.forEach((e) => {
        this.compositionList.push({ value: e.name, no: e.no })
      })
    })

    // 获取供应商
    getManufacturer({ limit: 99999 }).then((res) => {
      // console.log(res)
      if (res.data.data && res.data.data.length) {
        res.data.data.forEach((e) => {
          this.manufacturerList.push({ value: e.no, label: e.no })
          this.testManufacturerList.push(e.no)
        })
      }
    })

    // 获取已有的执行标准数组
    standardList().then((res) => {
      // console.log(res)
      let exist = 0
      for (const i of res.data.data) {
        if (!this.standardList.length) {
          this.standardList.push({ value: i.standard })
        } else {
          for (const j of this.standardList) {
            if (j.value == i.standard) {
              exist = 1
              break
            }
            exist = 0
          }
          if (!exist) {
            this.standardList.push({ value: i.standard })
          }
        }
      }
    })
  },
  methods: {
    /**
     * ----------- 新增 --------------
     */
    // 品名的模糊搜索
    handleSearchProductNameList(queryString, callBack) {
      let restaurants = this.productNameList
      let results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        callBack(results)
      }, 100 * Math.random())
    },

    createStateFilter(queryString) {
      return (state) => {
        let isState =
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        if (isState) {
          return isState
        }
      }
    },
    handleProductNameSelect(item) {
      console.log(item)
      this.commodityNameNo = item.no
      this.commodityNameBlur()
    },
    onBlurProductNameSelect() {
      if (this.commodityNameNo === '') return
      let commodityItem = this.productNameList.find((item, index) => {
        if (this.commodityNameNo === item.no) {
          return item
        }
      })
      if (!commodityItem) {
        // this.commodityNameNo = ''
        // this.$message.error('未找到对应的品名')
        console.log(this.commodityNameNo, '1')
        let activeItem = this.productNameList.find((item, index) => {
          if (this.commodityNameNo === item.value) {
            return item
          }
        })
        if (!activeItem) {
          this.commodityNameNo = ''
          this.$message.error('未找到对应的品名编号')
        } else {
          this.commodityNameNo = activeItem.no
          this.commodityNameBlur()
        }
      } else {
        this.commodityNameNo = commodityItem.no
        this.commodityNameBlur()
      }
    },

    onBlurColor() {
      if (this.colorNo_1) {
        let commodityItem = this.colorList.find((item, index) => {
          if (this.colorNo_1 === item.no) {
            return item
          }
        })
        if (!commodityItem) {
          let activeItem = this.colorList.find((item, index) => {
            if (item.value === this.colorNo_1) {
              return item
            }
          })
          if (!activeItem) {
            this.colorNo_1 = ''
            this.colorName1 = ''
            this.$message.error('未找到对应的颜色')
          } else {
            this.colorNo_1 = activeItem.no
            this.colorName1 = activeItem.value
            this.addColor(this.colorNo_1, this.coloName1)
            this.colorNo1Blur()
            this.removeDisabled(this.colorNo_1)
          }
          // console.log(activeItem)
        } else {
          console.log(this.colorNo_1, commodityItem, '2')
          this.colorNo_1 = commodityItem.no
          this.colorName1 = commodityItem.value
          this.addColor(this.colorNo_1, this.coloName1)
          this.colorNo1Blur()
          this.removeDisabled(this.colorNo_1)
        }
      } else {
        this.colorNo_1 = ''
        this.colorName1 = ''
      }
    },
    changeBrandedName() {
      this.colorNo_1 = ''

      this.colorNo_2 = ''
      this.colorNo_3 = ''
      this.colorNo_4 = ''
      this.colorNo_5 = ''
      this.colorName1 = ''
      this.colorName2 = ''
      this.colorName3 = ''
      this.colorName4 = ''
      this.colorName5 = ''
    },
    // 选择品名
    changeCommodityNameNo(index) {
      this.commodityNameNo = this.productNameList[index].no
      this.commodityNameBlur()
    },
    changeColor_1(index) {
      this.colorNo_1 = this.colorList[index].no
      this.colorName1 = this.colorList[index].value
      // this.colorNo1Blur()
      // this.removeDisabled(this.colorNo_1)
    },
    changeColor_2(index) {
      this.colorNo_2 = this.colorList[index].no
      this.colorName2 = this.colorList[index].value
      this.colorNo2Blur()
      this.removeDisabled(this.colorNo_2)
    },
    changeColor_3(index) {
      this.colorNo_3 = this.colorList[index].no
      this.colorName3 = this.colorList[index].value
      this.colorNo3Blur()
      this.removeDisabled(this.colorNo_3)
    },
    changeColor_4(index) {
      this.colorNo_4 = this.colorList[index].no
      this.colorName4 = this.colorList[index].value
      this.colorNo4Blur()
      this.removeDisabled(this.colorNo_4)
    },
    changeColor_5(index) {
      this.colorNo_5 = this.colorList[index].no
      this.colorName5 = this.colorList[index].value
      this.colorNo5Blur()
      this.removeDisabled(this.colorNo_5)
    },
    changeQuarter(index) {
      this.quarter = this.quarterList[index].value
    },

    removeDisabled(currentNo) {
      let chooseColorNo = {
        no_1: this.colorNo_1,
        no_2: this.colorNo_2,
        no_3: this.colorNo_3,
        no_4: this.colorNo_4,
        no_5: this.colorNo_5
      }

      let chooseColorNoArray = []
      Object.keys(chooseColorNo).forEach((keys) => {
        if (chooseColorNo[keys]) {
          chooseColorNoArray.push(chooseColorNo[keys])
          chooseColorNoArray.sort()
        }
      })
      this.colorList.forEach((item, index) => {
        if (item.no === currentNo) {
          // 设置当前选择项为true
          item.disabled = true
        } else {
          // 判断 其他的选择项
          let chooseItem = null // 记录设置为 true 的选项
          chooseColorNoArray.forEach((keys) => {
            if (keys === item.no) {
              item.disabled = true
              chooseItem = item.no
            } else if (item.no !== chooseItem) {
              item.disabled = false
            }
          })
        }
      })
    },
    /*
     *  ------------- 结束 ---------------------
     */
    leave() {
      if (this.supplier != '') {
        console.log(this.supplier.toString())
        let index = JSON.parse(
          JSON.stringify(this.testManufacturerList)
        ).indexOf(this.supplier.toString())
        // console.log(index)
        if (index == -1) {
          this.$message.warning('没有此供应商编号')
          this.supplier = ''
        }
      }
    },
    //传图片文件夹-多张图片
    changesData() {
      if (!this.styleNumber) {
        this.$message.info('请填写款号')
        return
      }
      // console.log(this.$refs.file.files,typeof(this.$refs.file.files));//文件夹里的内容
      // console.log(this.$refs.file.files.length);
      // if (this.$refs.file.files.length > 100) {
      //   this.$message.info('一次最多上传100张图片')
      //   return
      // }
      // return
      let formdata = new FormData()
      this.$refs.file.files.forEach((e) => {
        formdata.append('fileList', e)
      })
      formdata.append('data', this.styleNumber)
      upPicture(formdata)
        .then((res) => {
          console.log(res.data)
          if (res.data.code != 200) {
            this.$message.error('上传失败')
            return
          }
          this.$message.success('上传成功')
          if (res.data.data && res.data.data.length) {
            this.$message.info(res.data.data.toString() + '上传失败')
          }
        })
        .finally(() => {
          this.$refs.file.value = ''
        })
    },
    // 上传一张图片
    upLoad(e) {
      if (!this.styleNumber) {
        this.$message.info('请填写款号')
        return
      }
      const file = document.getElementById('file')
      if (!file.files[0]) return
      let formdata = new FormData()
      formdata.append('file', file.files[0])
      formdata.append('data', this.styleNumber)
      console.log(formdata, typeof formdata)
      kindsNumberDoUpload(formdata)
        .then((res) => {
          if (res.data.code == 200) {
            this.imgSrc = res.data.data.path
            this.preservation(true, true)
          }
        })
        .finally(() => {
          this.$refs.file1.value = ''
        })
    },
    // 成份输入选择
    querySearch(queryString, cb) {
      let compositionList = this.compositionList
      let results = queryString
        ? compositionList.filter(this.createFilterNo(queryString))
        : compositionList
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 附件输入选择
    queryNameList(queryString, cb) {
      // let accessoryNameList = this.accessoryNameList
      // let results = queryString ? accessoryNameList.filter(this.createFilterNo(queryString)) : accessoryNameList
      // 调用 callback 返回建议列表的数据
      cb(this.accessoryNameList)
    },
    // 品名输入选择
    queryCommodityName(queryString, cb) {
      let results = queryString
        ? this.productNameListAll.filter(this.createFilterValue(queryString))
        : this.productNameList
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 部类输入选择
    queryCommodityTypeNo(queryString, cb) {
      // let results = queryString ? this.commodityTypeList.filter(this.createFilterValue(queryString)) : this.commodityTypeList
      // 调用 callback 返回建议列表的数据
      cb(this.commodityTypeList)
    },
    // 选择部类
    commodityTypeNoSelect(e) {
      if (this.commodityTypeNo) {
        this.commodityTypeNo = this.commodityTypeNo.toUpperCase().trim()
        this.productNameList = []
        this.productNameListAll.forEach((e) => {
          if (e.type == this.commodityTypeNo) {
            this.productNameList.push(e)
          }
        })
      } else {
        this.commodityNameNo = ''
        this.commodityName = ''
        this.productNameList = this.productNameListAll
      }
    },
    // 颜色输入选择
    queryColor(queryString, cb) {
      let colorList = this.colorList
      let results = queryString
        ? colorList.filter(this.createFilterNo(queryString))
        : colorList
      // 调用 callback 返回建议列表的数据
      // cb(this.colorList)
      cb(results)
    },
    // 执行标准输入选择
    queryStandardList(queryString, cb) {
      // let standardList = this.standardList
      // let results = queryString ? standardList.filter(this.createFilterNo(queryString)) : standardList
      // 调用 callback 返回建议列表的数据
      cb(this.standardList)
    },
    // 波段输入选择
    queryWaveList(queryString, cb) {
      // let waveBandList = this.waveBandList
      // let results = queryString ? waveBandList.filter(this.createFilterNo(queryString)) : waveBandList
      // 调用 callback 返回建议列表的数据
      cb(this.waveBandList)
    },
    // 季度输入选择
    queryQuarterList(queryString, cb) {
      cb(this.quarterList)
    },
    querySupplier(queryString, cb) {
      cb(this.manufacturerList)
    },
    createFilterNo(queryString) {
      return (composition) => {
        return (
          composition.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    createFilterValue(queryString) {
      return (composition) => {
        return (
          composition.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },

    // 清空数据
    clearData() {
      // console.log('clear')

      this.commodityTypeNo = ''
      this.pnId = ''
      this.pniId = ''
      this.kindsNumber = ''
      this.mnemonicCode = ''
      this.styleNumber = ''
      this.brandedName = ''
      this.colorList = []
      this.sizeDataList = []
      this.originalManufacturerKindsNumber = ''
      this.colorNo_1 = ''
      this.colorName1 = ''
      this.colorNo_2 = ''
      this.colorName2 = ''
      this.colorNo_3 = ''
      this.colorName3 = ''
      this.colorNo_4 = ''
      this.colorName4 = ''
      this.colorNo_5 = ''
      this.colorName5 = ''
      this.colorStrList = []
      this.sellingPriceOne = ''
      this.sellingPriceTwo = ''
      this.sellingPriceThree = ''
      this.sellingPriceFour = ''
      this.vipPrice = ''
      this.manufacturerPrice = ''
      this.quarter = ''
      this.matchStyle = ''
      this.generalizePrice = ''
      this.waveBand = ''
      this.containNo = ''
      this.statistics = false
      this.supplier = ''
      this.accessoryNameNo = ''
      this.accessoryName = ''
      this.remark = ''
      this.productLevel = ''
      ;(this.WashingFigure_1 = '02'),
        (this.WashingFigure_2 = '52'),
        (this.WashingFigure_3 = '12'),
        (this.WashingFigure_4 = '30'),
        (this.WashingFigure_5 = '35'),
        (this.WashingFigure_6 = '32'),
        (this.ean13No = '')
      this.standard = ''
      this.safetyType = ''
      ;(this.washingType = '一般'), (this.isIncludeMetalFibre = '')
      this.composition_1 = ''
      this.compositionNo_1 = ''
      this.composition_2 = ''
      this.compositionNo_2 = ''
      this.composition_3 = ''
      this.compositionNo_3 = ''
      this.composition_4 = ''
      this.compositionNo_4 = ''
      this.composition_5 = ''
      this.compositionNo_5 = ''
      this.composition_6 = ''
      this.compositionNo_6 = ''
      this.composition_7 = ''
      this.compositionNo_7 = ''
      this.composition_8 = ''
      this.compositionNo_8 = ''
      this.composition_9 = ''
      this.compositionNo_9 = ''
      this.composition_10 = ''
      this.compositionNo_10 = ''
      this.composition_11 = ''
      this.compositionNo_11 = ''
      this.composition_12 = ''
      this.compositionNo_12 = ''
      this.composition_13 = ''
      this.compositionNo_13 = ''
      this.composition_14 = ''
      this.compositionNo_14 = ''
      this.composition_15 = ''
      this.compositionNo_15 = ''
      this.composition_16 = ''
      this.compositionNo_16 = ''
      this.composition_17 = ''
      this.compositionNo_17 = ''
      this.composition_18 = ''
      this.compositionNo_18 = ''
      this.composition_19 = ''
      this.compositionNo_19 = ''
      this.composition_20 = ''
      this.compositionNo_20 = ''
      this.composition_21 = ''
      this.compositionNo_21 = ''
      this.composition_22 = ''
      this.compositionNo_22 = ''
      this.composition_23 = ''
      this.compositionNo_23 = ''
      this.composition_24 = ''
      this.compositionNo_24 = ''
      this.composition_25 = ''
      this.compositionNo_25 = ''
      this.imgSrc = ''
      this.commodityNameNo = ''
      this.fileList = []
    },
    // 填充数据
    fillBlanks(obj) {
      // console.log(obj)
      this.colorStrList = []
      for (let i = 0; i < 5; i++) {
        this[`colorNo_${i + 1}`] = ''
        this[`colorName${i + 1}`] = ''
      }
      this.colorListOriginal = obj.colorList
      for (let i = 0; i < this.colorListOriginal.length; i++) {
        const e = this.colorListOriginal[i]
        this[`colorNo_${i + 1}`] = e.colorNo
        this[`colorName${i + 1}`] = e.colorName
        this.colorStrList.push(e.colorNo + ':' + e.colorName)
      }
      // console.log(this.colorStrList)
      this.sizeDataOriginal = obj.sizeList
      this.sizeData = obj.sizeList

      let a = obj
      // console.log(this.quarterList)
      let int0 = setInterval(() => {
        if (this.quarterList.length) {
          clearInterval(int0)
          for (const i of this.quarterList) {
            if (a.quarter == i.label) {
              this.quarter = i.value
            }
          }
        }
      })

      this.pnId = a.id
      this.kindsNumber = a.kindsNumber
      this.mnemonicCode = a.mnemonicCode
      this.commodityTypeNo = a.commodityType
      this.styleNumber = a.styleNumber
      this.brandedName = a.brandedName
      this.company = a.brandedCompany
      this.originalManufacturerKindsNumber =
        a.originalManufacturerKindsNumber || ''
      this.commodityName = a.commodityName
      this.sellingPriceOne = a.sellingPriceOne
      this.sellingPriceTwo = a.sellingPriceTwo
      this.sellingPriceThree = a.sellingPriceThree
      this.sellingPriceFour = a.sellingPriceFour
      this.vipPrice = a.vipPrice
      this.manufacturerPrice = a.manufacturerPrice

      this.matchStyle = a.matchStyle || ''
      this.generalizePrice = a.generalizePrice
      this.waveBand = a.waveBand || ''
      this.supplier = a.supplier
      this.accessoryName = a.accessoryName
      this.imgSrc = a.image || ''
      this.gender = a.clothing
    },
    fillIngredient(info) {
      this.pniId = info.id
      this.containNo = info.containNo
      this.ean13No = info.ean13No
      this.remark = info.remark || ''
      this.productLevel = info.productLevel || ''
      this.safetyType = info.safetyType
      this.standard = info.standard
      this.washingType = info.washingType
      this.isIncludeMetalFibre = info.isIncludeMetalFibre
      this.WashingFigure_1 = info.imageOne
      this.WashingFigure_2 = info.imageTwo
      this.WashingFigure_3 = info.imageThree
      this.WashingFigure_4 = info.imageFour
      this.WashingFigure_5 = info.imageFive
      this.WashingFigure_6 = info.imageSix
      this.composition_1 = info.ingredientOne
      this.composition_2 = info.ingredientTwo
      this.composition_3 = info.ingredientThree
      this.composition_4 = info.ingredientFour
      this.composition_5 = info.ingredientFive
      this.composition_6 = info.ingredientSix
      this.composition_7 = info.ingredientSeven
      this.composition_8 = info.ingredientEight
      this.composition_9 = info.ingredientNine
      this.composition_10 = info.ingredientTen
      this.composition_11 = info.ingredientEleven
      this.composition_12 = info.ingredientTwelve
      this.composition_13 = info.ingredientThirteen
      this.composition_14 = info.ingredientFourteen
      this.composition_15 = info.ingredientFifteen
      this.composition_16 = info.ingredientSixteen
      this.composition_17 = info.ingredientSeventeen
      this.composition_18 = info.ingredientEighteen
      this.composition_19 = info.ingredientNineteen
      this.composition_20 = info.ingredientTwenty
      this.composition_21 = info.ingredientTwentyOne
      this.composition_22 = info.ingredientTwentyTwo
      this.composition_23 = info.ingredientTwentyThree
      this.composition_24 = info.ingredientTwentyFour
      this.composition_25 = info.ingredientTwentyFive
      this.upDown = String(info.upDown)
    },
    // 输入框按回车失去焦点
    inputEnter() {
      let f = document.getElementsByClassName('el-popper')
      f.forEach((f) => {
        f.style.display = 'none'
      })
    },
    // 款号失去焦点查看是否存在成份建档
    styleNumberBlur() {
      if (!this.styleNumber) return
      getArtNo({
        styleNumber: this.styleNumber,
        pageSize: 9999,
        groupType: 1
      }).then((res) => {
        // console.log(res)
        if (res.data.data.length) {
          let tmpList = res.data.data
          let tmpColorList = []
          let tmpSizeList = []
          let hasColor = 0
          let hasSize = 0
          for (const i of tmpList) {
            hasColor = 1
            hasSize = 1
            if (tmpColorList.length) {
              for (const c of tmpColorList) {
                if (i.colorNo == c.colorNo) {
                  hasColor = 0
                  break
                }
              }
              if (hasColor) {
                tmpColorList.push({
                  colorNo: i.colorNo,
                  colorName: i.colorName
                })
              }
            } else {
              tmpColorList.push({ colorNo: i.colorNo, colorName: i.colorName })
            }

            if (tmpSizeList.length) {
              for (const s of tmpSizeList) {
                if (i.size == s) {
                  hasSize = 0
                  break
                }
              }
              if (hasSize) {
                tmpSizeList.push(i.size)
              }
            } else {
              tmpSizeList.push(i.size)
            }
          }

          let obj = res.data.data[0]
          obj.colorList = tmpColorList
          obj.sizeList = tmpSizeList
          if (this.isCreate) this.$emit('edit')
          this.fillBlanks(obj)
          this._getKindsNumberIngredient({ typeNumber: this.styleNumber })
        }
      })
    },

    // 颜色1失去焦点查询
    colorNo1Blur() {
      this.inputEnter()
      if (this.colorNo_1 == '') {
        this.colorName1 = ''
        return
      }

      if (!isNaN(this.colorNo_1)) {
        // 是数字
        for (const i of this.colorList) {
          // console.log(i)
          if (this.colorNo_1 == i.no) {
            this.colorName1 = i.value
            this.addColor(this.colorNo_1, this.colorName1)
            return
          }
        }
        this.colorNo_1 = ''
        this.colorName1 = ''
        this.$alert('无此色号，请重输', '', {
          confirmButtonText: '确定'
        })
      }
    },
    // 颜色2失去焦点查询
    colorNo2Blur() {
      this.inputEnter()
      if (this.colorNo_2 == '') {
        this.colorName2 = ''
        return
      }
      if (!isNaN(this.colorNo_2)) {
        // 是数字
        for (const i of this.colorList) {
          // console.log(i)
          if (this.colorNo_2 == i.no) {
            this.colorName2 = i.value
            this.addColor(this.colorNo_2, this.colorName2)
            return
          }
        }
        this.colorNo_2 = ''
        this.colorName2 = ''
        this.$alert('无此色号，请重输', '', {
          confirmButtonText: '确定'
        })
      }
    },
    // 颜色3失去焦点查询
    colorNo3Blur() {
      this.inputEnter()
      if (this.colorNo_3 == '') {
        this.colorName3 = ''
        return
      }
      if (!isNaN(this.colorNo_3)) {
        // 是数字
        for (const i of this.colorList) {
          // console.log(i)
          if (this.colorNo_3 == i.no) {
            this.colorName3 = i.value
            this.addColor(this.colorNo_3, this.colorName3)
            return
          }
        }
        this.colorNo_3 = ''
        this.colorName3 = ''
        this.$alert('无此色号，请重输', '', {
          confirmButtonText: '确定'
        })
      }
    },
    // 颜色4失去焦点查询
    colorNo4Blur() {
      this.inputEnter()
      if (this.colorNo_4 == '') {
        this.colorName4 = ''
        return
      }
      if (!isNaN(this.colorNo_4)) {
        // 是数字
        for (const i of this.colorList) {
          // console.log(i)
          if (this.colorNo_4 == i.no) {
            this.colorName4 = i.value
            this.addColor(this.colorNo_4, this.colorName4)
            return
          }
        }
        this.colorNo_4 = ''
        this.colorName4 = ''
        this.$alert('无此色号，请重输', '', {
          confirmButtonText: '确定'
        })
      }
    },
    // 颜色5失去焦点查询
    colorNo5Blur() {
      this.inputEnter()
      if (this.colorNo_5 == '') {
        this.colorName5 = ''
        return
      }
      if (!isNaN(this.colorNo_5)) {
        // 是数字
        for (const i of this.colorList) {
          // console.log(i)
          if (this.colorNo_5 == i.no) {
            this.colorName5 = i.value
            this.addColor(this.colorNo_5, this.colorName5)
            return
          }
        }
        this.colorNo_5 = ''
        this.colorName5 = ''
        this.$alert('无此色号，请重输', '', {
          confirmButtonText: '确定'
        })
      }
    },
    colorNo1Select(item) {
      this.colorName1 = item.value
      this.colorNo_1 = item.no
      this.addColor(this.colorNo_1, this.colorName1)
    },
    colorNo2Select(item) {
      this.colorName2 = item.value
      this.colorNo_2 = item.no
      this.addColor(this.colorNo_2, this.colorName2)
    },
    colorNo3Select(item) {
      this.colorName3 = item.value
      this.colorNo_3 = item.no
      this.addColor(this.colorNo_3, this.colorName3)
    },
    colorNo4Select(item) {
      this.colorName4 = item.value
      this.colorNo_4 = item.no
      this.addColor(this.colorNo_4, this.colorName4)
    },
    colorNo5Select(item) {
      this.colorName5 = item.value
      this.colorNo_5 = item.no
      this.addColor(this.colorNo_5, this.colorName5)
    },
    addColor(no, name) {
      // console.log(no,name)
      this.colorStrList.push(no + ':' + name)
    },
    // 附件失去焦点查询
    accessoryBlur(e) {
      if (this.accessoryNameNo == '') {
        this.accessoryName = ''
        return
      }
      if (!isNaN(this.accessoryNameNo)) {
        // 是数字
        for (const i of this.accessoryNameList) {
          // console.log(i)
          if (this.accessoryNameNo == i.no) {
            this.accessoryName = i.name
            return
          }
        }
        this.accessoryNameNo = ''
        this.accessoryName = ''
        this.$alert('无此附件编号，请重输', '', {
          confirmButtonText: '确定'
        })
      }
    },
    // 品名失去焦点查询
    commodityNameBlur() {
      setTimeout(() => {
        if (this.commodityNameNo) {
          for (const i of this.productNameListAll) {
            if (this.commodityNameNo == i.no) {
              this.commodityName = i.value
              this.commodityTypeNo = i.type
              if (this.commodityTypeNo == null) {
                this.commodityNameNo = ''
                this.commodityName = ''
                this.commodityTypeNo = ''
                this.$message.error({ message: '该品名无部类', offset: 400 })
                return
              }
              return
            }
          }
          this.commodityNameNo = ''
          this.commodityName = ''
          this.$message.error('无此品名编号，请重输')
        } else {
          this.commodityName = ''
        }
      }, 100)
    },

    //  保存
    preservation(b, c) {
      if (!this.commodityName) {
        this.$alert('请选择品名', '必填项为空', {
          confirmButtonText: '确定'
        })
        return
      }
      if (!this.sellingPriceOne) {
        this.$alert('请填写正价', '必填项为空', {
          confirmButtonText: '确定'
        })
        return
      }
      if (!this.supplier) {
        this.$alert('请填写供应商', '必填项为空', {
          confirmButtonText: '确定'
        })
        return
      }
      if (!this.quarter) {
        this.$alert('请填写季度', '必填项为空', {
          confirmButtonText: '确定'
        })
        return
      }
      // if (!this.containNo) {
      //   this.$alert('请填写含有码', '必填项为空', {
      //     confirmButtonText: '确定'
      //   })
      //   return
      // }

      let success = false
      let sizeList = []
      if (!this.sizeData.length) {
        this.$alert('请至少选择一个尺码', '必填项为空', {
          confirmButtonText: '确定'
        })
        return
      }
      // if (this.styleNumber.length != this.styleNumberLength) {
      //   this.$alert(`当前选择品牌款号位为${this.styleNumberLength}位，请修改款号`, '', {
      //     confirmButtonText: '确定'
      //   })
      //   return
      // }
      this.sizeDataList.forEach((a) => {
        this.sizeData.forEach((b) => {
          if (b == a.size) {
            sizeList.push(a)
          }
        })
      })
      // console.log(sizeList)
      // return

      let colorName = this.colorStrList.toString()
      if (!colorName) {
        this.$alert('请至少选择一个颜色', '必填项为空', {
          confirmButtonText: '确定'
        })
        return
      }
      // console.log(colorName)
      // if (this.colorNo_1) {
      //   colorName = `${this.colorNo_1}:${this.colorName1}`
      // }
      // if (this.colorNo_2) {
      //   colorName = `${colorName},${this.colorNo_2}:${this.colorName2}`
      // }
      // if (this.colorNo_3) {
      //   colorName = `${colorName},${this.colorNo_3}:${this.colorName3}`
      // }
      // if (this.colorNo_4) {
      //   colorName = `${colorName},${this.colorNo_4}:${this.colorName4}`
      // }
      // if (this.colorNo_5) {
      //   colorName = `${colorName},${this.colorNo_5}:${this.colorName5}`
      // }
      // if (JSON.stringify(colorName)=='{}') {
      //   this.$alert('请至少选择一个颜色', '必填项为空', {
      //     confirmButtonText: '确定'
      //   })
      //   return
      // }

      let sellingPrice = 0
      if (this.sellingPriceFour) {
        sellingPrice = this.sellingPriceFour
      } else if (this.sellingPriceThree && this.sellingPriceThree) {
        sellingPrice = this.sellingPriceThree
      } else if (this.sellingPriceTwo && this.sellingPriceTwo) {
        sellingPrice = this.sellingPriceTwo
      } else if (this.sellingPriceOne && this.sellingPriceOne) {
        sellingPrice = this.sellingPriceOne
      }

      // 获取季度id
      let quarterID = ''
      if (!this.quarterList.length) {
        postQuarter({ quarterName: this.quarter }).then((res) => {
          // console.log(res)
          if (res.data.code == 200) {
            quarterID = res.data.data
            this.quarterList.push({ value: this.quarter, label: quarterID })
          }
        })
      } else {
        let exist = 0
        for (const i of this.quarterList) {
          if (this.quarter == i.value) {
            exist = 1
            quarterID = i.label
            break
          }
        }
        if (!exist) {
          postQuarter({ quarterName: this.quarter }).then((res) => {
            // console.log(res)
            if (res.data.code == 200) {
              quarterID = res.data.data
              this.quarterList.push({ value: this.quarter, label: quarterID })
            }
          })
        }
      }

      let int = setInterval(() => {
        if (quarterID != '') {
          clearInterval(int)
          // if (this.imgSrc) {
          //   deleteImage({url:this.imgSrc})
          // }
          let postKN = {
            kindsNumber: {
              kindSort: 1,
              mnemonicCode: this.mnemonicCode,
              commodityType: this.commodityTypeNo,
              styleNumber: this.styleNumber,
              brandedName: this.brandedName,
              brandedCompany: this.company,
              originalManufacturerKindsNumber:
                this.originalManufacturerKindsNumber,
              commodityName: this.commodityName,
              colorName,
              sellingPrice,
              sellingPriceOne: this.sellingPriceOne,
              sellingPriceTwo: this.sellingPriceTwo,
              sellingPriceThree: this.sellingPriceThree,
              sellingPriceFour: this.sellingPriceFour,
              vipPrice: this.vipPrice,
              manufacturerPrice: this.manufacturerPrice,
              quarter: quarterID,
              matchStyle: this.matchStyle,
              generalizePrice: this.generalizePrice,
              waveBand: this.waveBand,
              statistics: this.statistics ? 1 : 0,
              supplier: this.supplier,
              accessoryName: this.accessoryName,
              image: this.imgSrc,
              clothing: this.gender
            },
            sizeList
          }

          let postKNI = {
            id: this.pniId,
            containNo: this.containNo,
            ean13No: this.ean13No,
            remark: this.remark,
            productLevel: this.productLevel,
            safetyType: this.safetyType,
            sellingPrice,
            standard: this.standard,
            typeNumber: this.styleNumber,
            washingType: this.washingType,
            isIncludeMetalFibre: this.isIncludeMetalFibre,
            imageOne: this.WashingFigure_1,
            imageTwo: this.WashingFigure_2,
            imageThree: this.WashingFigure_3,
            imageFour: this.WashingFigure_4,
            imageFive: this.WashingFigure_5,
            imageSix: this.WashingFigure_6,
            ingredientOne: this.composition_1,
            ingredientTwo: this.composition_2,
            ingredientThree: this.composition_3,
            ingredientFour: this.composition_4,
            ingredientFive: this.composition_5,
            ingredientSix: this.composition_6,
            ingredientSeven: this.composition_7,
            ingredientEight: this.composition_8,
            ingredientNine: this.composition_9,
            ingredientTen: this.composition_10,
            ingredientEleven: this.composition_11,
            ingredientTwelve: this.composition_12,
            ingredientThirteen: this.composition_13,
            ingredientFourteen: this.composition_14,
            ingredientFifteen: this.composition_15,
            ingredientSixteen: this.composition_16,
            ingredientSeventeen: this.composition_17,
            ingredientEighteen: this.composition_18,
            ingredientNineteen: this.composition_19,
            ingredientTwenty: this.composition_20,
            ingredientTwentyOne: this.composition_21,
            ingredientTwentyTwo: this.composition_22,
            ingredientTwentyThree: this.composition_23,
            ingredientTwentyFour: this.composition_24,
            ingredientTwentyFive: this.composition_25,
            upDown: Number(this.upDown)
          }
          // console.log(postKNI)
          // this.ingredientFn(postKNI,b,c)
          // return

          if (this.isCreate) {
            // 新建
            // console.log('新增货号对象')
            postKindsNumber(JSON.stringify(postKN)).then((res) => {
              // console.log(res)
              if (res.data.code == 200) {
                this.$message({
                  message: '新建货号对象成功',
                  type: 'success'
                })
                this.$emit('addArtNoSuc', this.styleNumber)
                this.ingredientFn(postKNI, b, c)
              } else {
                this.$message.error('新建货号对象失败')
              }
            })
          } else {
            // 修改
            // console.log('修改货号对象')
            // console.log(this.sellingPriceNo)
            // console.log(this.detailInfo)
            let flag = 0
            if (this.sellingPriceNo == 1) {
              if (this.detailInfo.sellingPriceOne != this.sellingPriceOne) {
                flag = 1
              }
            } else if (this.sellingPriceNo == 2) {
              if (this.detailInfo.sellingPriceTwo != this.sellingPriceTwo) {
                flag = 1
              }
            } else if (this.sellingPriceNo == 3) {
              if (this.detailInfo.sellingPriceThree != this.sellingPriceThree) {
                flag = 1
              }
            } else if (this.sellingPriceNo == 4) {
              if (this.detailInfo.sellingPriceFour != this.sellingPriceFour) {
                flag = 1
              }
            }
            if (flag) {
              this.$confirm('确定修改售价?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                postKindsNumber(JSON.stringify(postKN)).then((res) => {
                  // console.log(res)
                  if (res.data.code == 200) {
                    this.$message.success('修改货号对象成功')
                    this.$emit('addArtNoSuc', this.styleNumber)
                    this.ingredientFn(postKNI, b, c)
                  } else {
                    this.$message.error('修改货号对象失败')
                  }
                })
              })
            } else {
              postKindsNumber(JSON.stringify(postKN)).then((res) => {
                // console.log(res)
                if (res.data.code == 200) {
                  this.$message.success('修改货号对象成功')
                  this.$emit('addArtNoSuc', this.styleNumber)
                  this.ingredientFn(postKNI, b, c)
                } else {
                  this.$message.error('修改货号对象失败')
                }
              })
            }

            return
            let colorArr = colorName.split(',')
            if (
              colorArr.length > this.colorListOriginal.length ||
              sizeList.length > this.sizeDataOriginal.length
            ) {
              // postKindsNumber
              // let tmpColor = []
              // let num = colorArr.length - this.colorListOriginal.length
              // console.log(num)

              // for (const i of colorArr) {
              //   let exist = 0
              //   for (const j of this.colorListOriginal) {
              //     if (i.indexOf(j.colorNo) != -1) {
              //       exist = 1
              //       break
              //     }
              //   }
              //   if (!exist) tmpColor.push(i)
              // }
              // console.log(tmpColor)
              postKindsNumber(JSON.stringify(postKN)).then((res) => {
                console.log(res)
                if (res.data.code == 200) {
                  modifyKindsNumbers(JSON.stringify(postKN)).then((res) => {
                    console.log(res)
                    if (res.data.code == 200) {
                      this.$message({
                        message: '修改货号对象成功',
                        type: 'success'
                      })
                      this.$emit('addArtNoSuc', this.styleNumber)
                      this.ingredientFn(postKNI, b, c)
                    } else {
                      this.$message.error('修改货号对象失败')
                    }
                  })
                } else {
                  this.$message.error('修改货号对象失败')
                }
              })
            } else {
              // postKindsNumber
              modifyKindsNumbers(JSON.stringify(postKN)).then((res) => {
                console.log(res)
                if (res.data.code == 200) {
                  this.$message({
                    message: '修改货号对象成功',
                    type: 'success'
                  })
                  this.ingredientFn(postKNI, b, c)
                  this.$emit('addArtNoSuc', this.styleNumber)
                } else {
                  this.$message.error('修改货号对象失败')
                }
              })
            }
          }
        }
      })
    },
    ingredientFn(postKNI, b, c) {
      // console.log(b,c)
      // console.log(this.styleNumber)
      if (this.isCreate) {
        // 新增货号成份对象
        postKindsNumberIngredient(postKNI).then((res) => {
          // console.log('新增货号成份对象')
          // console.log(res)
          if (res.data.code == 200) {
            this.$message({
              message: '新增货号成份对象成功',
              type: 'success'
            })
            this._getKindsNumberIngredient({ typeNumber: this.styleNumber })
            if (c) return
            if (b) {
              this.closeClick()
            } else {
              this.clearData()
            }
          } else {
            this.$message.error('新增货号成份对象失败')
          }
        })
      } else {
        // 更新货号成份对象
        // console.log('更新货号成份对象')
        putKindsNumberIngredient(postKNI).then((res) => {
          // console.log(res)
          if (res.data.code == 200) {
            this.$message({
              message: '更新货号成份对象成功',
              type: 'success'
            })
            this._getKindsNumberIngredient({ typeNumber: this.styleNumber })
          } else {
            this.$message.error('更新货号成份对象失败')
          }
          if (c) return
          if (b) {
            this.closeClick()
          } else {
            this.clearData()
          }
        })
      }
    },

    clearC1() {
      if (this.c2) return
      this.c1 = false
      this.composition_6 = ''
      this.compositionNo_6 = ''
      this.composition_7 = ''
      this.compositionNo_7 = ''
      this.composition_8 = ''
      this.compositionNo_8 = ''
      this.composition_9 = ''
      this.compositionNo_9 = ''
      this.composition_10 = ''
      this.compositionNo_10 = ''
    },
    clearC2() {
      if (this.c3) return
      this.c2 = false
      this.composition_11 = ''
      this.compositionNo_11 = ''
      this.composition_12 = ''
      this.compositionNo_12 = ''
      this.composition_13 = ''
      this.compositionNo_13 = ''
      this.composition_14 = ''
      this.compositionNo_14 = ''
      this.composition_15 = ''
      this.compositionNo_15 = ''
    },
    clearC3() {
      if (this.c4) return
      this.c3 = false
      this.composition_16 = ''
      this.compositionNo_16 = ''
      this.composition_17 = ''
      this.compositionNo_17 = ''
      this.composition_18 = ''
      this.compositionNo_18 = ''
      this.composition_19 = ''
      this.compositionNo_19 = ''
      this.composition_20 = ''
      this.compositionNo_20 = ''
    },
    clearC4() {
      this.c4 = false
      this.composition_21 = ''
      this.compositionNo_21 = ''
      this.composition_22 = ''
      this.compositionNo_22 = ''
      this.composition_23 = ''
      this.compositionNo_23 = ''
      this.composition_24 = ''
      this.compositionNo_24 = ''
      this.composition_25 = ''
      this.compositionNo_25 = ''
    },
    // 点 X 关闭
    closeClick() {
      this.$emit('closeClick')
      this.clearData()
      this.styleNumber = ''
    },
    // 关闭图标弹窗
    closeIconDoc() {
      this.showIconDoc = 'none'
    },
    // 获得表格数据
    _getKindsNumberIngredient(params = {}) {
      getKindsNumberIngredient(params).then((res) => {
        // console.log(res)
        this.ingredient = res.data.data || []
        let box = this.$refs.ingredientTable.bodyWrapper
        this.$nextTick(() => {
          box.scrollTop = box.scrollHeight
        })
        if (params.typeNumber && this.ingredient.length) {
          this.fillIngredient(this.ingredient[0])
        }
      })
    },

    // 导出Excel
    exportExcel() {
      let xlsxParam = { raw: true } //转换成excel时，使用原始的格式
      let wb = XLSX.utils.table_to_book(
        document.querySelector('#outTable'),
        xlsxParam
      )
      let wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }),
          'sheetjs.xlsx'
        )
        this.$emit('exportFinish')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },

    // 图片上传
    uploadSuccess(e) {
      if (e.code == 200) {
        this.imgSrc = e.data.path
        // this.$message.success('上传成功')
        this.preservation(true, true)
      }
    },
    // 超出数量限制
    exceed(fileList) {
      // console.log(fileList)
      this.$message({
        message: '最多上传一张图片',
        type: 'error'
      })
    },
    // 移除图片
    handleRemove(file, fileList) {
      // console.log(file)
      deleteImage({ url: file.response.data.path })
    },
    inClick(row) {
      this.ingredientId = row.id
    },
    delin() {
      if (!this.ingredientId) {
        this.$message.error('请选择要删除的数据!')
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delateIngredient({ id: this.ingredientId }).then((res) => {
            // console.log(res)
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    dblclick(row) {
      // 双击一行编辑
      // console.log(row)
      // if (row.typeNumber == this.styleNumber) return
      this.fillIngredient(row)
      getArtNo({
        styleNumber: row.typeNumber,
        pageSize: 9999,
        groupType: 1
      }).then((res) => {
        // console.log(res)
        // return
        let tmpList = res.data.data
        let tmpColorList = []
        let tmpSizeList = []
        let hasColor = 0
        let hasSize = 0
        for (const i of tmpList) {
          hasColor = 1
          hasSize = 1
          if (tmpColorList.length) {
            for (const c of tmpColorList) {
              if (i.colorNo == c.colorNo) {
                hasColor = 0
                break
              }
            }
            if (hasColor) {
              tmpColorList.push({ colorNo: i.colorNo, colorName: i.colorName })
            }
          } else {
            tmpColorList.push({ colorNo: i.colorNo, colorName: i.colorName })
          }

          if (tmpSizeList.length) {
            for (const s of tmpSizeList) {
              if (i.size == s) {
                hasSize = 0
                break
              }
            }
            if (hasSize) {
              tmpSizeList.push(i.size)
            }
          } else {
            tmpSizeList.push(i.size)
          }
        }

        let obj = res.data.data[0]
        obj.colorList = tmpColorList
        obj.sizeList = tmpSizeList
        if (this.isCreate) this.$emit('edit')
        this.fillBlanks(obj)
      })
    }
  },
  watch: {
    show(c, d) {
      if (c == 'block') {
        this.sellingPriceNo = 0
        if (!this.isCreate) {
          this.fillBlanks(this.detailInfo)
          if (this.detailInfo.sellingPriceOne) {
            this.sellingPriceNo = 1
          }
          if (this.detailInfo.sellingPriceTwo) {
            this.sellingPriceNo = 2
          }
          if (this.detailInfo.sellingPriceThree) {
            this.sellingPriceNo = 3
          }
          if (this.detailInfo.sellingPriceFour) {
            this.sellingPriceNo = 4
          }
          this._getKindsNumberIngredient({ typeNumber: this.styleNumber })
        } else {
          this._getKindsNumberIngredient()
        }
      }
    },
    washingType(a, b) {
      if (a == '一般') {
        this.WashingFigure_1 = '01'
        this.WashingFigure_2 = '02'
        this.WashingFigure_3 = '03'
        this.WashingFigure_4 = '04'
        this.WashingFigure_5 = '05'
        this.WashingFigure_6 = ''
      } else if (a == '干洗') {
        this.WashingFigure_1 = '02'
        this.WashingFigure_2 = '52'
        this.WashingFigure_3 = '01'
        this.WashingFigure_4 = '57'
        this.WashingFigure_5 = '04'
        this.WashingFigure_6 = '32'
      } else if (a == '真丝') {
        this.WashingFigure_1 = '52'
        this.WashingFigure_2 = '13'
        this.WashingFigure_3 = '67'
        this.WashingFigure_4 = '57'
        this.WashingFigure_5 = '68'
        this.WashingFigure_6 = '32'
      } else if (a == '皮草') {
        this.WashingFigure_1 = '01'
        this.WashingFigure_2 = '66'
        this.WashingFigure_3 = '02'
        this.WashingFigure_4 = '24'
        this.WashingFigure_5 = '67'
        this.WashingFigure_6 = '32'
      } else if (a == '其他') {
        this.WashingFigure_1 = ''
        this.WashingFigure_2 = ''
        this.WashingFigure_3 = ''
        this.WashingFigure_4 = ''
        this.WashingFigure_5 = ''
        this.WashingFigure_6 = ''
      }
    },
    checkSize(a, b) {
      if (!a) {
        this.sizeData = []
      }
    },
    brandedName(a, b) {
      // console.log(a)
      if (!a) return
      this.company = ''
      this.sizeKindId = ''
      this.styleNumberLength = 0
      this.colorList = []
      this.sizeDataList = []
      if (a != '' && a != undefined) {
        this.company = ''
        // 由品牌名称获得品牌公司
        getBranded({ name: a, limit: 99999 }).then((r) => {
          // console.log(r)
          if (r.data.data.length > 0) {
            this.company = r.data.data[0].brandedCompany

            // 由品牌公司获得颜色
            getColorSeason({
              brandedCompany: this.company,
              limit: 9999
            }).then((rr) => {
              // console.log(rr)
              if (rr.data.data.length) {
                rr.data.data.forEach((e) => {
                  this.colorList.push({ no: e.no, value: e.name })
                })
              }
              // console.log(this.colorList)
            })

            // 由品牌公司获得尺码种类
            getBarCode({ company: this.company }).then((rrr) => {
              // console.log(rrr)
              this.sizeKindId = rrr.data.data[0].sizeKindId
              this.styleNumberLength = rrr.data.data[0].styleNumber

              // 由尺码种类获得尺码
              getSize({ limit: 999999 }).then((res) => {
                // console.log(res)
                // 尺码集合
                res.data.data.forEach((e) => {
                  if (e.kind == this.sizeKindId) {
                    // console.log(e)
                    this.sizeDataList.push(e)
                  }
                })
              })
            })
          }
        })
      }
    },
    accessoryNameNo(a, b) {
      if (a == '') {
        this.accessoryName = ''
      }
    },
    commodityNameNo(a, b) {
      // console.log(a)
      if (a == '') {
        this.commodityName = ''
        this.commodityTypeNo = ''
      }
      this.commodityNameNo = a.toUpperCase().trim()
    },
    commodityName(a, b) {
      // console.log(this.commodityNameNo)
      if (a && !String(this.commodityNameNo)) {
        for (const i of this.productNameListAll) {
          if (i.value == a) {
            this.commodityNameNo = i.no
            return
          }
        }
      }
    },
    styleNumber(a, b) {
      this.styleNumber = a.toUpperCase().trim()
    },
    originalManufacturerKindsNumber(a, b) {
      this.originalManufacturerKindsNumber = a.toUpperCase().trim()
    },
    quarter(a, b) {
      this.quarter = a.toUpperCase().trim()
    },
    matchStyle(a, b) {
      this.matchStyle = a.toUpperCase().trim()
    },
    waveBand(a, b) {
      this.waveBand = a.toUpperCase().trim()
    },
    containNo(a, b) {
      this.containNo = a.toUpperCase().trim()
    },
    supplier(a, b) {
      this.supplier = a.toUpperCase().trim()
    },
    accessoryNameNo(a, b) {
      this.accessoryNameNo = a.toUpperCase().trim()
    },
    ean13No(a, b) {
      this.ean13No = a.toUpperCase().trim()
    },
    standard(a, b) {
      this.standard = a.toUpperCase().trim()
    },
    commodityTypeNo(a, b) {
      if (a != null) {
        this.commodityTypeNo = a.toUpperCase().trim()
      }
    },
    colorNo_1(a, b) {
      this.colorNo_1 = a.toUpperCase().trim()
    },
    colorNo_2(a, b) {
      this.colorNo_2 = a.toUpperCase().trim()
    },
    colorNo_3(a, b) {
      this.colorNo_3 = a.toUpperCase().trim()
    },
    colorNo_4(a, b) {
      this.colorNo_4 = a.toUpperCase().trim()
    },
    colorNo_5(a, b) {
      this.colorNo_5 = a.toUpperCase().trim()
    }
  },
  mounted() {
    let _this = this
    document.onkeydown = function (event) {
      if (_this.show == 'none') return
      let e = event || window.event || arguments.callee.caller.arguments[0]
      if (e && e.keyCode == 114) {
        // 按 F3
        _this.showIconDoc = 'block'
        event.returnValue = false
        event.cancelBubble = true
        return false
      }
    }
  }
}
</script>
